<template>
  <div class="ec_child" id="main1"></div>
</template>

<script>
export default {
  data() {
    return {
      res: {},
      tmp: {},
      hz: 0,
      hb: 0,
      hd: 0,
      hn: 0,
      xb: 0,
      xn: 0,
      db: 0
    }
  },
  methods: {
    initChart() {
      var myChart = this.$echarts.init(document.getElementById("main1"));
      myChart.setOption({
        title: {
          text: "报道学生地区占比",
          left: "center"
        },
        //提示框组件,鼠标移动上去显示的提示内容
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。
        },
        //图例
        legend: {
          //图例垂直排列
          orient: 'vertical',
          x: 'right',
          //data中的名字要与series-data中的列名对应，方可点击操控
          data: ['华中地区', '华北地区', '华东地区', '华南地区', '西北地区', '西南地区', '东北地区']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            //饼状图
            // radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            //标签
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                textStyle: {
                  align: 'center',
                  baseline: 'middle',
                  fontFamily: '微软雅黑',
                  fontSize: 15,
                  fontWeight: 'bolder'
                }
              },
            },
            data: [
              { value: this.hz, name: '华中地区' },
              { value: this.hb, name: '华北地区' },
              { value: this.hd, name: '华东地区' },
              { value: this.hn, name: '华南地区' },
              { value: this.xb, name: '西北地区' },
              { value: this.xn, name: '西南地区' },
              { value: this.db, name: '东北地区' },
            ]
          }
        ]
      });
    },
    initData() {
      for (let key in this.res) {
        for (let ikey in this.res[key]) {
          console.log(ikey + " " + this.res[key][ikey]);
          this.tmp[ikey] = this.res[key][ikey];
        }
      }
      console.log(this.tmp);
      this.hz = this.tmp['河南省'] + this.tmp['湖南省'] + this.tmp['湖北省'];                 //3
      this.hb = this.tmp['北京市'] + this.tmp['天津市'] + this.tmp['山西省']                  //4
        + this.tmp['河北省'];
      this.hd = this.tmp['上海市'] + this.tmp['江苏省'] + this.tmp['浙江省']                  //8
        + this.tmp['安徽省'] + this.tmp['江西省'] + this.tmp['山东省']
        + this.tmp['福建省'] + this.tmp['台湾省'];
      this.hn = this.tmp['广东省'] + this.tmp['广西壮族自治区'] + this.tmp['海南省']           //5
        + this.tmp['香港特别行政区'] + this.tmp['澳门特别行政区'];
      this.xb = this.tmp['陕西省'] + this.tmp['甘肃省'] + this.tmp['青海省']                  //6
        + this.tmp['宁夏回族自治区'] + this.tmp['新疆维吾尔自治区'] + this.tmp['内蒙古自治区'];
      this.xn = this.tmp['重庆市'] + this.tmp['四川省'] + this.tmp['贵州省']                  //5
        + this.tmp['云南省'] + this.tmp['西藏自治区'];
      this.db = this.tmp['辽宁省'] + this.tmp['吉林省'] + this.tmp['黑龙江省'];               //3
      console.log(this.hz);
      console.log(this.hb);
      console.log(this.hd);
      console.log(this.hn);
      console.log(this.xb);
      console.log(this.xn);
      console.log(this.db);
    }
  },
  mounted() {
    this.$axios
      .get('../../public/testData/data.json')
      .then((res) => {
        this.res = res.data.data.province;
        this.initData();
        this.initChart();
      })
  },
};
</script>
